<template>
  <div class="search">
    <!-- 自动补全输入框 -->
    <!-- :fetch-suggestions="fetchData" 获取输入建议的方法 -->
    <!-- :trigger-on-focus="false" 光标聚焦的时候不触发 fetData-->
    <!-- @select="goDetail" 选中某一个推荐项触发-->
    <el-autocomplete 
    clearable 
    placeholder="请输入医院名称"
    class="form"
    v-model="hosname"
    :fetch-suggestions="fetchData"
    :trigger-on-focus="false"
    @select="goDetail"
     />
    <!-- 搜索按钮 -->
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 引入 search 图标
import { Search } from '@element-plus/icons-vue'
// 引入类型
import type { HospitalInfoResponseData } from "@/api/home/type"
// 引入通过关键字获取医院信息的接口
import { reqHospitalInfoByName } from '@/api/home/index'
// 创建路由对象
let $router = useRouter()
// 绑定搜索框数据
let hosname = ref<string>("")
// 获取输入建议的方法, 第一个参数是获取到搜索框的值, 第二个参数是回调函数
const fetchData = async (keyword: string, callback: any) => {
  let res:HospitalInfoResponseData = await reqHospitalInfoByName(keyword)
  // console.log(res)
  // 注意: 需要整理数据 变成组件需要的数据格式 
  let showData = res.data.map(item => {
    return {
      value: item.hosname, //展示的医院的名字
      hoscode: item.hoscode, //存储医院的编码
    }
  })
  callback(showData)
}
// 选中某一个推荐项触发
// const goDetail = (item:any) => {
const goDetail = () => {
  // 点击推荐项目进入医院详情页, 将来需要携带 query参数(医院的编码)
  $router.push({path:'/hospital'})
}
</script>
<script lang="ts">
export default {
  name: "Search",
};
</script>
<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
/* 
  深度选择器有三种： 
    1.原生css深度选择器: >>>
    2.less中： /deep/ 
    3.scss中：::deep 
*/
// 因为 该组件加了 scoped 外界访问不到 该组件的样式 所以使用深度选择器
  :deep(.form) {
    width: 600px;
    margin-right: 10px;
  }
}
</style>